<template>
    <view class="container">
        <view class="topWrap">
            <view class="fileItem">
                <view class="center">
                    <image src="https://qiniu-bjjrzy.bjjrzy.com/bjupi/practice/pdfIcon.svg"
                        :style="{ width: '80rpx', height: '80rpx' }" />
                    <view class="contentStyle">
                        <view class="title oneWrap">{{ docInfo.name || "" }}</view>
                        <view class="subTitle">
                            <text>{{ docInfo.insertDate ? docInfo.insertDate.split(" ")[0] : "" }}</text>
                            <text style="margin: 0 44rpx">{{ docInfo.downloadNum || 0 }}下载</text>
                            <text>{{ docInfo.pageCount || 0 }}页</text>
                        </view>
                    </view>
                </view>

            </view>
            <view class="flex between " style="margin-top: 28rpx;">
                <button open-type="share" class="btnStyle center" @click="onShare">
                    <image src="../static/images/teachingMaterial/shareIcon.svg" style="width: 38rpx;height: 38rpx;" />
                    <text style="margin-left: 20rpx;">分享</text>
                </button>

                <view class="btnStyle center" @click="onDownloadFile">
                    <image src="../static/images/teachingMaterial/blueDownloadIcon.svg"
                        style="width: 48rpx;height: 48rpx;" />
                    <text style="margin-left: 20rpx;">下载</text>
                </view>
                <view class="btnStyle center" @click="onCollect">
                    <image :src="`../static/images/teachingMaterial/${docInfo.isCollect?'collectIcon':'noCollectIcon'}.svg`"
                        style="width: 48rpx;height: 48rpx;" />
                    <text style="margin-left: 20rpx;">{{ docInfo.isCollect ? "取消" : "收藏" }}</text>
                </view>
            </view>
        </view>
        <scroll-view class="bottomWrap" :scroll-y="false">
            <image src="../static/images/teachingMaterial/pageFooterIcon.png" class="iconStyle" />
            <view style="font-size: 36rpx;margin: 82rpx 0 50rpx 42rpx ;">
                文档预览
            </view>
            <scroll-view class="botItemWrap" :scroll-y="true">
                <view class="wrapC">
                    <view v-for="(url, i) in imgList" :key="url" class="bottomItem">
                        <view style="flex-direction: column;" class="center" v-if="url" @click="selectIndex = i">
                            <image :src="url" :class="selectIndex == i ? 'activeImg' : 'imageStyle'" />
                            <text style="margin-top: 10rpx;">{{ i + 1 }}</text>
                        </view>
                        <view style="width: 216rpx;height: 294rpx" v-else></view>
                    </view>
                </view>
            </scroll-view>
            <view class="bottomBtn" @click="onGoDetail()">
                <image src="../static/images/showIcon.svg" style="width: 48rpx;height: 48rpx;margin-right: 22rpx;" />
                <text>查看</text>
            </view>
        </scroll-view>

    </view>
</template>

<script>
import { notificationFun, onDownLoadByUrl } from '../utils/PrjUtils';
import { resCollect, resCancel } from "../services/TeachingMaterialService.js"
import { docIncrement, smallImgPreview,resourcesHead } from '../services/DataDocumentService';
import { resVisit } from '../services/PracticeTestingService';
export default {
    data() {
        return {
            // 文档信息
            docInfo: {},
            treeData: [],
            safeAreaInsets: {},
            selectIndex: 0,
            imgList: [],
        }
    },
    computed: {},
    methods: {
        // 初始化数据
        onInitData(id){
            resourcesHead(2,id).then(res=>{
                let data=res??{}
                this.docInfo={...this.docInfo,...data}
            })
        },
        //收藏和取消
        onCollect() {
            if(this?.teachingInfo?.isShare&&!uni.getStorageSync('appKey')){
                uni.reLaunch({
                    url: '/pages/login/login'
                })
                return;
            }      
            let param = { resourceId: this.docInfo?.id, type: 2 }
            console.log(this.teachingInfo)
            if (this.docInfo?.isCollect) {
                resCancel(param).then(res => {
                    notificationFun("操作成功")
                    this.onInitData(this.docInfo.id)
                    this.docInfo = { ...this.docInfo, isCollect: !this.docInfo.isCollect }
                })
            }
            else {
                resCollect(param).then(res => {
                    notificationFun("操作成功")
                    this.onInitData(this.docInfo.id)
                    this.docInfo = { ...this.docInfo, isCollect: !this.docInfo.isCollect }
                })

            }
        },
        // 下载信息
        onDownloadFile() {
            console.log("点击了")
            // downloadFile(this.docInfo.url)
            uni.showLoading({
                title: '加载中'
            });
            resVisit({ resourceId: this.docInfo.id, type: 2 }).then(res => { })
            docIncrement(this.docInfo.id).then(res => {
                onDownLoadByUrl(this.docInfo.downloadUrl, this.docInfo.name)
                // 重新查询
                this.onInitData(this.docInfo?.id)
            }).catch(err => {
                uni.hideLoading();
                notificationFun("下载失败");
            })
        },
        // 跳转
        onGoDetail() {
            resVisit({ resourceId: this.docInfo.id, type: 2 }).then(res => { })
            uni.navigateTo({
                url: `/teachingMaterial/showFile?fileInfo=${encodeURIComponent(JSON.stringify({ url: this.docInfo.url, fileName: this.docInfo.name, pageNo: this.selectIndex + 1 }))}`
            })
        },
        // 初始化预览图片
        onInitImg(id) {
            smallImgPreview(id).then((res = []) => {
                // console.log(res)
                // let data = Array.from({ length: 20 }, (item, index) => 'ss' + 1)
                let index = 3 - res.length % 3
                let newData = [...res, ...Array(index).fill("")]
                this.imgList = newData
            })
        },
        // 分享
        onShare() {
            uni.share({
                provider: "weixin",
                scene: "WXSceneSession",
                type: 1,
                summary: "快来体验练促优",
                success: function (res) {
                    console.log("success:" + JSON.stringify(res));
                },
                fail: function (err) {
                    console.log("fail:" + JSON.stringify(err));
                }
            });
        }
    },
    onLoad(option) {
        // console.log(decodeURIComponent(option.info),"----144")
        const info = JSON.parse(decodeURIComponent(option.info)) || {}
        this.docInfo = info
        this.onInitImg(info.id)
        // 后来修改的,用于分享查询
        this.onInitData(info.id)
    },

    beforeMount() {
        uni.getSystemInfo({
            success: (res) => {
                // console.log(res, "--26")
                this.windowWidth = res.windowWidth
                this.windowHeight = res.windowHeight
                this.safeAreaInsets = res.safeAreaInsets
            }
        })

    },
    onShow() {
        // let data = Array.from({ length: 20 }, (item, index) => 'ss' + 1)
        // let index =3 - data.length % 3
        // let newData = [...data, ...Array(index).fill("")]
        // this.imgList = newData
    },
    onShareAppMessage(res) {
        if (res.from === 'button') {
            var that = this;
            // this.tuigId = that.app.id; //邀请上级的id
            // // 来自页面内分享按钮
            // console.log(this.tuigId);
        }
        return {
            title: this.docInfo.name??"分享信息",
            path: `/dataDocument/showFileDetailDoc?info=${encodeURIComponent(JSON.stringify({...this.docInfo,isShare:true}))}`,
            imageUrl: this.imgList[0]??'https://hyfileonline.bjjrzy.com:19222/7aa903961d0245c79984fe4b84c26c44/2.jpg'
        };
    }

}
</script>

<style lang="scss">
page {
    background: #f2f2f2 !important;
}

.container {
    /* padding: 30rpx; */
    height: 100vh;
    width: 100vw;
    overflow: hidden;
    box-sizing: border-box;
    position: relative;

    .topWrap {
        height: 372rpx;
        width: 100vw;
        border-bottom-left-radius: 24rpx;
        border-bottom-right-radius: 24rpx;
        background-color: #fff;
        margin-bottom: 20rpx;
        padding: 50rpx 30rpx 44rpx 30rpx;
        box-sizing: border-box;

        .fileItem {
            height: 128rpx;
            border-radius: 24rpx;
            display: flex;
            align-items: center;
            justify-items: center;
            padding: 30rpx 34rpx;
            box-sizing: border-box;
            margin-bottom: 32rpx;

            .contentStyle {
                margin-left: 28rpx;
                display: flex;
                flex-direction: column;
                width: 500rpx;

                .title {
                    font-size: 32rpx;
                    margin-bottom: 5rpx;
                }

                .subTitle {
                    font-size: 24rpx;
                    color: #999999
                }
            }
        }

        .btnStyle {
            width: 208rpx;
            height: 90rpx;
            box-shadow: 0px 1px 8px 0px #00000014;
            border-radius: 24rpx;
        }
    }

    .bottomWrap {
        height: calc(100vh - 392rpx);
        background-color: #fff;
        border-top-left-radius: 24rpx;
        border-top-right-radius: 24rpx;
        position: relative;
        box-sizing: border-box;

        .iconStyle {
            position: absolute;
            top: 0;
            right: 0;
            width: 48rpx;
            height: 48rpx;
        }

        .mlStyle {
            height: 100%;
            padding: 52rpx 40rpx 52rpx 56rpx;

            .treeWrap {
                height: calc(100vh - 552rpx);
            }

        }

        .botItemWrap {
            height: calc(100vh - 5vh - 666rpx);

            .imageStyle {
                width: 216rpx;
                height: 294rpx;
                border: 1rpx solid #E9E9E9;
            }

            .activeImg {
                width: 216rpx;
                height: 294rpx;
                border: 1rpx solid #37B874;
            }

            .wrapC {
                display: flex;
                flex-wrap: wrap;
                justify-content: space-evenly;

                .bottomItem {
                    display: flex;
                    flex-direction: column;

                    align-items: center;
                    justify-content: center;
                    box-sizing: border-box;
                    margin-bottom: 26rpx;
                }
            }

        }

        .bottomBtn {
            width: calc(100% - 60rpx);
            display: flex;
            align-items: center;
            justify-content: center;
            height: 90rpx;
            box-shadow: 0px 1px 8px 0px #00000014;
            border-radius: 24rpx;
            position: absolute;
            left: 30rpx;
            bottom: 5%;
            background-color: #37B874;
            color: #fff;
        }

    }

    button::after {
        border: none;
    }

    button {
        position: relative;
        /* display: block; */
        margin-left: 0;
        margin-right: 0;
        padding-left: 0px;
        padding-right: 0px;
        box-sizing: border-box;
        // font-size: 18px;
        text-align: center;
        text-decoration: none;
        // line-height: 1;
        line-height: 1.35;
        // border-radius: 5px;
        -webkit-tap-highlight-color: transparent;
        overflow: hidden;
        color: #000000;
        background-color: #fff;
        width: 100%;
        height: 100%;
    }
}
</style>